<template>
  <div class="album-page">
    <div class="album-grid">
      <div v-for="album in albumList" :key="album.id" class="album-item" @mouseenter="hovered = album.id"
        @mouseleave="hovered = null" :class="{ hovered: hovered === album.id }">
        <div class="cover-wrapper">
          <img :src="album.cover" :alt="album.name" />
          <div class="cover-mask">
            <span class="view-btn" @click.stop="previewCover(album.cover)">预览封面</span>
          </div>
        </div>
        <div class="caption">
          <span>{{ album.name }}</span>
        </div>
      </div>
    </div>
    <!-- 图片预览弹窗 -->
    <transition name="preview-zoom">
      <div class="preview-modal" v-if="previewImg" @click="previewImg = ''">
        <img :src="previewImg" class="preview-img" @click.stop />
      </div>
    </transition>
  </div>
</template>

<script setup>
import { fecthAlbumList } from '@/service/module/album'
import { onMounted, ref } from 'vue'

const albumList = ref([])
const hovered = ref(null)
const previewImg = ref('')

const fetchData = async () => {
  const res = await fecthAlbumList()
  albumList.value = res.list
}

const goToAlbum = (album) => {
  // router.push(`/album/${album.id}`)
}

const previewCover = (cover) => {
  console.log('previewCover', cover)
  previewImg.value = cover
}

onMounted(() => {
  fetchData()
})
</script>

<style lang="scss" scoped>
.album-page {
  padding: 32px 5vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);

  h2 {
    margin-bottom: 32px;
    font-size: 2.2rem;
    text-align: center;
    letter-spacing: 2px;
    color: #3b3b3b;
    font-weight: bold;
    text-shadow: 0 2px 8px #e0e7ff;
  }

  .album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 32px;
    justify-items: center;
  }

  .album-item {
    width: 220px;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(80, 80, 180, 0.10);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.3s;
    position: relative;

    .cover-wrapper {
      position: relative;
      width: 100%;
      height: 160px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
      }

      .cover-mask {
        position: absolute;
        inset: 0;
        background: rgba(60, 60, 100, 0.18);
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s;

        .view-btn {
          background: rgba(255, 255, 255, 0.85);
          color: #4f46e5;
          padding: 6px 18px;
          border-radius: 20px;
          font-weight: bold;
          font-size: 1rem;
          box-shadow: 0 2px 8px #e0e7ff;
          cursor: pointer;
          transition: background 0.2s;
        }

        .view-btn:hover {
          background: #6366f1;
          color: #fff;
        }
      }
    }

    .caption {
      padding: 16px 0 12px 0;
      font-size: 1.1rem;
      text-align: center;
      color: #333;
      font-weight: 500;
      letter-spacing: 1px;
    }

    &:hover,
    &.hovered {
      transform: scale(1.07) rotate(-2deg);
      box-shadow: 0 8px 32px rgba(99, 102, 241, 0.18);

      .cover-wrapper img {
        transform: scale(1.08) rotate(2deg);
      }

      .cover-mask {
        opacity: 1;
      }
    }
  }

  /* 预览弹窗动画 */
  .preview-modal {
    position: fixed;
    inset: 0;
    background: rgba(30, 41, 59, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;

    .preview-img {
      max-width: 80vw;
      max-height: 80vh;
      border-radius: 18px;
      box-shadow: 0 8px 40px #6366f1;
      animation: preview-pop 0.5s cubic-bezier(.34, 1.56, .64, 1);
    }
  }

  .preview-zoom-enter-active,
  .preview-zoom-leave-active {
    transition: opacity 0.4s;
  }

  .preview-zoom-enter-from,
  .preview-zoom-leave-to {
    opacity: 0;
  }

  @keyframes preview-pop {
    0% {
      transform: scale(0.6) rotate(-10deg);
      opacity: 0;
    }

    80% {
      transform: scale(1.08) rotate(2deg);
      opacity: 1;
    }

    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
  }
}
</style>